﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

  <title>PhyTouch</title>

  <style type="text/css">
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    html {
      -ms-touch-action: none;
    }

    body,
    ul,
    li {
      padding: 0;
      margin: 0;
      border: 0;
    }

    body {
      font-size: 12px;
      font-family: ubuntu, helvetica, arial;
      overflow: hidden;
    }

    #header {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 45px;
      line-height: 45px;
      background: #00ABEB;
      padding: 0;
      color: #eee;
      font-size: 20px;
      text-align: center;
      font-weight: bold;
    }

    #footer {
      position: absolute;
      z-index: 2;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 48px;
      background: #e2e2e2;
      padding: 0;
    }

    #wrapper {
      position: absolute;
      z-index: 1;
      top: 45px;
      bottom: 48px;
      left: 0;
      width: 100%;
      background: #ccc;
      overflow: hidden;
    }

    #scroller {
      position: absolute;
      z-index: 1;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      width: 100%;
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
      -o-text-size-adjust: none;
      text-size-adjust: none;
    }

    #scroller ul {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
      text-align: left;
    }

    #scroller li {
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #fff;
      background-color: #fafafa;
      font-size: 14px;
    }
  </style>
</head>

<body>
  <div id="header">PhyTouch</div>
  <div id="wrapper">
    <div id="scroller">
      <ul>
        <li>PhyTouch</li>
        <li>AlloyFinger - Super Tiny Size Gestures Library</li>
        <li>Transformjs - Made CSS3 Super Easy</li>
        <li>AlloyFlow - </li>
        <li>Nuclear - Some HTML + Scoped CSS + JS </li>
        <li>AlloyGameEngine</li>
        <li>Rosin</li>
        <li>LivePool</li>
        <li>AlloyStick</li>
        <li>CodeStar</li>
        <li>AlloyDesigner</li>
        <li>JXAnimate</li>
        <li>Spirit</li>
        <li>AlloyImage</li>
        <li>ModJS</li>
        <li>Pretty row 16</li>
        <li>stepify</li>
        <li>AlloyTimer</li>
        <li>Alloy Desktop</li>
        <li>JX UI</li>
        <li>CodeTank</li>
        <li>iSpriter</li>
        <li>Rythem</li>
        <li>Go!Png </li>
        <li>JX</li>
        <li>TEditor</li>
        <li> row 1</li>
        <li> row 2</li>
        <li> row 3</li>
        <li>row 5</li>
        <li> row 5</li>
        <li> row 7</li>
        <li> row 8</li>
        <li> row 9</li>
        <li> row 11</li>
        <li> row 11</li>
        <li> row 12</li>
        <li> row 13</li>
        <li> row 14</li>
        <li> row 15</li>
        <li> row 16</li>
        <li> row 17</li>
        <li> row 18</li>
        <li> row 19</li>
        <li> row 20</li>
        <li> row 21</li>
        <li> row 22</li>
        <li> row 23</li>
        <li> row 24</li>
        <li> row 25</li>
      </ul>
    </div>
  </div>
  <div id="footer"></div>
  <a href="https://github.com/AlloyTeam/PhyTouch" target="_blank"
    style="position: fixed; right: 0; top: 0; z-index: 3;width:140px;height:140px;">
    <img src="//alloyteam.github.io/github.png" alt="">
  </a>

  <script src="../index.js"></script>
  <script>
    var target = document.querySelector("#scroller");

    var at = new PhyTouch({
      touch: "#wrapper",//反馈触摸的dom
      vertical: true,//不必需，默认是true代表监听竖直方向touch
      target: { y: 0 }, //运动的对象
      property: "y",  //被滚动的属性
      sensitivity: 1,//不必需,触摸区域的灵敏度，默认值为1，可以为负数
      factor: 1,//不必需,默认值是1代表touch区域的1px的对应target.y的1
      min: window.innerHeight - 45 - 48 - 2000, //不必需,滚动属性的最小值
      max: 0, //不必需,滚动属性的最大值
      step: 40,
      animationEnd: function (value) {
        //console.log(value);
      },
      pressMove: function (evt, value) {
        //console.log(evt.deltaX + "_" + evt.deltaY + "__" + value);
      },
      change(value) {
        target.style.transform = "translate(0," + value + "px)"
        target.style.webkitTransform = "translate(0," + value + "px)"
      }
    })

    document.addEventListener("touchmove", function (evt) {
      evt.preventDefault();
    }, false);

  </script>
</body>

</html>